<template>
  <el-dialog
    :title="`分享文件夹:${fileName}`"
    :visible.sync="shareShow"
    width="520px"
    custom-class="share-create-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="share-create-body">
      <div class="date-set-block" v-if="!toggled">
        <table class="date-set-table">
          <tr class="date-set-tr">
            <td class="label">分享形式</td>
            <td class="code">
              <el-radio v-model="code_radio" label="1">有提取码</el-radio>
              <span class="tip">仅限拥有提取码者可查看，更加隐私安全</span>
            </td>
          </tr>
          <tr class="date-set-tr">
            <td class="label">有效期</td>
            <td class="time">
              <el-select v-model="time_value" size="small">
                <el-option
                  v-for="item in time_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
          </tr>
        </table>
      </div>
      <div class="link-show-block" v-else>
        <div class="link-row">
          <div class="link-input-wrapper">
            <input class="link-input" type="text" :value="link_value" readonly />
            <span class="tip">链接7天后失效</span>
          </div>
          <el-button
            class="copy-btn"
            v-clipboard:copy="copy_content"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >复制链接和提取码</el-button>
        </div>
        <div class="code-row">
          <span class="label">提取码</span>
          <span class="code">{{code_value}}</span>
        </div>
      </div>
    </div>
    <span slot="footer" class="footer-span">
      <el-button
        class="footer-btn confirm-btn"
        type="primary"
        v-if="!toggled"
        @click="createLink"
      >创建链接</el-button>
      <el-button class="footer-btn cancel-btn" @click="shareShow = false">{{toggled?'关闭':'取消'}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { fileAPI } from "@/utils/api.js";
import { baseServer } from "@/utils/global.js";
import { mapState, mapMutations, mapGetters } from "vuex";
import Bus from "@/upload/bus.js";
export default {
  data() {
    return {
      shareShow: false,
      toggled: false,
      code_radio: "1",
      time_value: "SEVEN_DAY",
      time_options: [
        {
          value: "FOREVER",
          label: "永久有效"
        },
        {
          value: "SEVEN_DAY",
          label: "7天"
        },
        {
          value: "ONE_DAY",
          label: "1天"
        }
      ],
      link_value: "",
      code_value: "",
      shareFileIds: [],
      fileName: ""
    };
  },
  computed: {
    copy_content() {
      return `链接: ${this.link_value} 提取码: ${this.code_value}`;
    }
  },
  mounted() {
    Bus.$on("onShareFiles", params => {
      this.shareShow = true;
      this.shareFileIds = params.shareFileIds;
      this.fileName = params.fileName;
    });
  },
  methods: {
    createLink() {
      fileAPI.share
        .makeShareImage({
          fileIdList: this.shareFileIds,
          shareType: this.time_value
        })
        .then(res => {
          this.link_value = baseServer + "/s?image=" + res.data.image;
          this.code_value = res.data.code;
          this.toggled = true;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 复制成功时的回调函数
    onCopy(e) {
      this.$message.success("内容已复制到剪切板！");
    },
    // 复制失败时的回调函数
    onError(e) {
      this.$message.error("抱歉，复制失败！");
    }
  }
};
</script>

<style lang="scss" scoped>
.share-create-dialog {
  .share-create-body {
    .date-set-block {
      .date-set-table {
        .date-set-tr {
          height: 40px;

          .label {
            width: 116px;
            text-align: right;
            padding-right: 50px;
          }
          .code {
            .tip {
              font-size: 12px;
              color: #999;
            }
          }
          .time {
          }
        }
      }
    }
    .link-show-block {
      .link-row {
        .link-input-wrapper {
          padding: 6px;
          margin-right: 74px;
          border: 1px solid #e9e9e9;
          border-radius: 4px;
          display: inline-block;
          font-size: 12px;
          .link-input {
            margin-right: 10px;
            width: 164px;
            color: #666;
            font-size: 12px;
          }
          .tip {
            color: #818796;
          }
        }

        .copy-btn {
          padding: 8px 12px;
          color: #fff;
          border-color: $theme-color;
          background-color: $theme-color !important;
        }
      }
      .code-row {
        margin-top: 20px;
        span {
          display: inline-block;
          font-size: 12px;
        }
        .label {
          color: #818796;
        }
        .code {
          padding: 6px;
          margin-left: 5px;
          border: 1px solid #e9e9e9;
          border-radius: 4px;
          color: #666;
        }
      }
    }
  }
  .footer-span {
    .footer-btn {
      padding: 8px 12px;
    }
    .confirm-btn {
      color: #fff;
      border-color: $theme-color;
      background-color: $theme-color !important;
    }
    .cancel-btn {
      color: $theme-color;
      border-color: #cadcb9;
      background-color: #fff;
    }
  }
}
</style>
<style lang="scss">
.share-create-dialog {
  .el-dialog__title {
    color: #353535;
    font-size: 14px;
  }
  .el-dialog__header {
    background-color: rgb(250, 253, 255);
    border-bottom: 1px solid rgb(208, 223, 231);
    padding-right: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .el-dialog__body {
    /*  padding: 0 20px; */
    .time {
      .el-select.el-select--small {
        width: 100px;
      }
    }
  }
}
</style>